<template>
    <div class="app-container">
        <div class="banner">
            <!-- 店铺状态分为待上线与已上线，商家入驻时，店铺状态为待上线，需提交平台审核，平台审核通过后，店铺状态为已上线 -->
            <div class="shopStatus">
                店铺状态：
                <span style="color:#e10202">未上线</span>
            </div>
            <div class="submitBtn">
                <el-button class="toolbar-btn" @click="shopPreview()">店铺预览</el-button>
                <el-button class="toolbar-btn" @click="submitEdit()">提交审核</el-button>
            </div>
        </div>
        <div class="tables">
            <div class="shopNavigation">
                <p>店铺导航</p>
                <el-table :data="shopNavigationData" border style="width: 100%">
                    <el-table-column prop="shopNavigation" label="店铺导航" width="180" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="180">
                        <template slot-scope="{row,$index}">
                            <el-button type="text" size="mini" @click.native="shopNavigationMessage(row)">管理</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="shopIndex">
                <p>店铺首页</p>
                <el-table :data="shopIndexData" border style="width: 100%">
                    <el-table-column prop="shopIndex" label="店铺首页" width="260" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="260">
                        <template slot-scope="{row,$index}">
                            <el-button type="text" size="mini" @click.native="shopIndexMessage(row)">管理</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"shopPreview",
    data() {
        return {
            shopNavigationData: [
                {
                    shopNavigation:'全部商品'
                },
            ],
            shopIndexData:[
                 {
                    shopIndex:'特价专区' 
                },
            ]
        };
    },
    methods:{
        // 店铺预览
        shopPreview(){},
        // 提交审核
        submitEdit(){},
        // 店铺导航管理
        shopNavigationMessage(row){},
        // 店铺首页管理
        shopIndexMessage(row){}
    }
};
</script>
<style  scoped>
.banner {
    display: flex;
    justify-content: space-between;
}
.tables {
    display: flex;
}
.shopNavigation {
    margin-right: 50px;
}
</style>